<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>链接和图像</title>
		<link rel="icon" href="./img/icon.ico" />
	</head>
	<body>
		<style type="text/css">
			div{
				width: 302px;
				margin: 0 auto;
			}
			.ahead{
				text-align: center;	
			}
		</style>
		
		<div class="ahead">			
			<h1 id="top">Flowers</h1>
			<p><a href="#daisy"><u>Daisy</u></a> 
				<a href="#rose"><u>Rose</u></a>
				<a href="#daffodil"><u>Daffodil</u></a>
			</p>
		</div>
		
		<div class="abody">	
			<p id="daisy">
				<a href="img/image004.png"><h3>Daisy</h3></a>
			</p>
			<div style="height: 250px;"><a target="_blank" href="./daisy.html"><img src="img/image004.png"/></a>			
			</div>
			
			<p id="rose">
				<a href="img/image005.png"><h3>Rose</h3></a>	
			</p>
			<div style="height: 250px;"><a target="_blank" href="./rose.html"><img src="img/image005.png"/></a>
			</div>
			
			<p id="daffodil">
				<a href="img/image006.png"><h3>Daffodil</h3></a>	
			</p>
			<div style="height: 250px;"><a target="_blank" href="./daffodil.html"><img src="img/image006.png"/></a>
			</div>
			<br /><br />
			<p>
				<a href="#top" style="color: red;">↑TOP</a>
			</p>
		</div>
		
	</body>
</html>
